<template>
  <div class="banner">
    <el-carousel height="380px">
      <el-carousel-item v-for="item in bannerDate" :key="item.id">
        <img :src="item.url" alt="" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {get} from "../../utils/request";

export default {
  name: "banner",
  data() {
    return {
      bannerDate: []
    }
  },
  created() {
    this.getbannerData();
  },
  methods: {
    getbannerData() {
      get('index/carousel/findAll').then(data => {
        if (data.data && data.status===200) {
          this.bannerDate = data.data
          console.log(data.data)
        } else {
          this.bannerDate = []
        }
      })
    }
  }
}
</script>

<style lang="scss">
.banner {
  margin-top: 217px;
  height: 380px;
  width: 100%;
    .el-carousel__indicator {
      .el-carousel__button {
        background-color: rgb(211,211,211);
        width: 30px;
        height: 8px;
      }
    }
  .is-active {
    .el-carousel__button {
      background-color: rgb(186,0,6);
    }
  }

}

</style>
